{% extends "base.html" %}
{% block title %}recipe{{recipe.title}}{% end %}

{% block head %}
{% end %}
{% block body %}
{% import tornado.escape %}

<div class="container">
    <div class="row">
        <div class="span7">
            <h1>{{ recipe.title }}</h1>
            <div class="d-dish-img">
                <img src="{{ recipe.pic_url }}" itemprop="image">
            </div>
            <div class="g-recipe-info">
                {{ recipe.intro }}
                <br/>
                {% for ing,unit in tornado.escape.json_decode(recipe.material) %}
                <h2> {{ing}}:{{unit}} </h2> <br/>
                {% end %}
                <div class="g-recipe-steps">
                    <ol>
                {% for desc,pic_id in tornado.escape.json_decode(recipe.detail) %}
                        <li>
                            {{desc}}
                            <img src="/temp_pic?pic_id={{pic_id}}">
                            <br class="c">
                        </li>
                {% end %}
                    </ol>
                </div>
                {% for dish in dishes %}
                <a href="/dish/{{ dish.id }}">{{ dish.intro }} </a>
                {% end %}
            </div>
        </div>
        <div class="span3">
            <a href="/cook/{{user.id}}">{{ user.nickname }}</a><br/>
            {% if  current_user and recipe.user_id == current_user.get('uid') %}
            <a href="/recipe/{{recipe.id}}/edit">Edit</a>
            <br/>
            <a href="/recipe/{{recipe.id}}/delete">Delete</a>
            <br/>
            {% end %}
            <a href="/recipe/{{recipe.id}}/create_dish">DishCreate</a>
        </div>
    </div>
</div>

{% end %}
